import { useStore } from "@/store";
import { CommonPPT } from "@/components/CommonPPT";

const PPTContent = () => {
  const {
    powerPointArr,
    curpowerPointIndex,
    PPtBgtype,
    PPtBgValue1,
    PPtBgValue2,
  } = useStore();
  // 单个幻灯片
  const slideListItem = powerPointArr?.[curpowerPointIndex - 1] || [];
  return (
    <div style={{ height: "100%", overflowY: "auto" }}>
      <div
        style={{
          // 设置元素的位置为相对定位
          position: "relative",
          // 设置元素的显示方式为弹性盒子
          display: "flex",
          // 设置弹性盒子的主轴方向为水平方向
          flexDirection: "row",
          // 设置弹性盒子的换行方式为换行
          flexWrap: "wrap",
          // 设置弹性盒子的子元素在主轴上的对齐方式为两端对齐
          justifyContent: "space-between",
          // 设置元素的宽度为1100px
          width: "1100px",
          // 设置元素的高度为550px
          height: "550px",
          // 设置元素的外边距为自动
          margin: "auto",
          // 设置元素的上外边距为50px
          marginTop: "50px",
          // 设置元素的内边距为16px 32px
          padding: "16px 32px",
          // 设置元素的溢出方式为隐藏
          overflow: "hidden",
          // 设置元素的背景颜色为白色
          backgroundColor: "white",
          // 设置元素的阴影效果
          boxShadow:
            "0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.12)",
          background:
            slideListItem?.PPtBgtype == "gradient"
              ? `linear-gradient(to bottom right,${slideListItem?.PPtBgValue1},${slideListItem?.PPtBgValue2})`
              : slideListItem?.PPtBgtype == "img"
              ? `url(${slideListItem?.PPtBgValue1}) 0% 0% / cover no-repeat`
              : slideListItem?.PPtBgValue1 || "#fff",
          backgroundSize: "cover", // 设置背景图片大小
          backgroundRepeat: "no-repeat", // 设置背景图片不重复
        }}
      >
        <CommonPPT slideListItem={slideListItem} />
        <div
          // 设置样式
          style={{
            // 设置定位为绝对定位
            position: "absolute",
            // 设置底部距离为4
            bottom: 4,
            // 设置左边距离为4
            left: 4,
            // 设置文字颜色为#bfbfbf
            color: "#bfbfbf",
            // 设置字体大小为16
            fontSize: 16,
          }}
        >
          {curpowerPointIndex}
        </div>
      </div>
    </div>
  );
};

export default PPTContent;
